<template>
  <div class="centers">
    <n-modal
      v-model:show="Obj.showModal"
      positive-text="确认"
      @positive-click="onPositiveClick"
      @negative-click="onNegativeClick"
      @Close="Close"
      negative-text="取消"
      :show-icon="false"
      preset="dialog"
    >
      <template #header>
        <div>{{ Obj.title }}</div>
      </template>
      <n-spin :show="isLoading">
        <div>
          <n-form :model="modelData" ref="formRef" :rules="rules">
            <n-grid :cols="24" :x-gap="12">
              <n-form-item-gi :span="12" label="企业名称" path="enterpriseName">
                <n-input placeholder="请输入企业名称" v-model:value="modelData.enterpriseName" />
              </n-form-item-gi>

              <n-form-item-gi :span="12" label="企业法人" path="legalPerson">
                <n-input placeholder="请输入企业法人" v-model:value="modelData.legalPerson" />
              </n-form-item-gi>

              <n-form-item-gi :span="12" label="法人联系电话" path="legalMobile">
                <n-input placeholder="请输入法人联系电话" v-model:value="modelData.legalMobile" />
              </n-form-item-gi>

              <n-form-item-gi :span="12" label="企业联系人" path="contactPerson">
                <n-input placeholder="请输入企业联系人" v-model:value="modelData.contactPerson" />
              </n-form-item-gi>

              <n-form-item-gi :span="12" label="企业联系人电话" path="contactMobile">
                <n-input
                  placeholder="请输入企业联系人电话"
                  v-model:value="modelData.contactMobile"
                />
              </n-form-item-gi>

              <n-form-item-gi :span="12" label="地址" path="address">
                <n-input placeholder="请输入企业地址" v-model:value="modelData.address" />
              </n-form-item-gi>

              <n-form-item-gi :span="12" label="所属行业" path="industryId">
                <n-input placeholder="请选择所属行业" v-model:value="modelData.industryId" />
              </n-form-item-gi>

              <n-form-item-gi :span="12" label="所属协会" path="associationId">
                <n-input placeholder="请选择所属协会" v-model:value="modelData.associationId" />
              </n-form-item-gi>

              <n-form-item-gi :span="12" label="区域id" path="districtCode">
                <n-input placeholder="请输入区域id" v-model:value="modelData.districtCode" />
              </n-form-item-gi>
              <n-form-item-gi :span="24">
                <n-collapse>
                  <n-collapse-item title="证件信息">
                    <n-grid :cols="24" :x-gap="12">
                      <n-form-item-gi :span="12" label="社会信用代码" path="socialCreditCode">
                        <n-input
                          placeholder="请输入社会信用代码"
                          v-model:value="modelData.socialCreditCode"
                        />
                      </n-form-item-gi>

                      <n-form-item-gi :span="12" label="发证机构" path="associationAgency">
                        <n-input
                          placeholder="请输入发证机构"
                          v-model:value="modelData.associationAgency"
                        />
                      </n-form-item-gi>

                      <n-form-item-gi :span="12" label="许可证有效期" path="lincenseRange">
                        <n-input
                          placeholder="请选择许可证有效期"
                          v-model:value="modelData.lincenseRange"
                        />
                      </n-form-item-gi>

                      <n-form-item-gi :span="12" label="许可证照片" path="licensePhoto">
                        <n-upload
                          :multiple="false"
                          :show-file-list="false"
                          @change="beforeLicenseUpload"
                        >
                          <span v-if="modelData.licensePhoto">
                            {{ modelData.licensePhoto.name }}
                            已选择一个文件
                          </span>
                          <n-button>请选择文件</n-button>
                        </n-upload>
<!--                        <n-input-->
<!--                          placeholder="请输入区域id"-->
<!--                          v-model:value="modelData.licensePhoto"-->
<!--                        />-->
                      </n-form-item-gi>
                    </n-grid>
                  </n-collapse-item>
                </n-collapse>
              </n-form-item-gi>
            </n-grid>
          </n-form>
        </div>
      </n-spin>
    </n-modal>
  </div>
</template>

<script lang="ts">
  import { defineComponent, onMounted, ref } from 'vue';
  import { addEnterprise, getEnterpriseDetail } from "@/api/BaseInfo";
  import { useMessage } from "naive-ui";
  export default defineComponent({
    name: 'Model',
    components: {},
    props: {
      // record: {
      //   type: Object,
      // },
      title: {
        type: String,
      },
      showModal: {
        type: Boolean,
      },
    },
    setup(props, { emit }) {
      const formRef = ref(null);
      const show = ref(true);
      const Obj = props;
      const modelData = ref({});
      const isLoading = ref(false);
      const message = useMessage();
      // const { record } = props;
      onMounted(async () => {
        modelData.value = {
          enterpriseName: '',
          legalPerson: '',
          legalMobile: '',
          contactPerson: '',
          contactMobile: '',
          address: '',
          industryId: '',
          associationId: '',
          districtCode: '',
          socialCreditCode: '',
          associationAgency: '',
          licenseStart: '',
          licenseEnd: '',
          licenseUri: '',
          licensePhoto: null,
        };
        // modelData.value = await getEnterpriseDetail(record.id);
      });
      //模态框关闭事件
      const onPositiveClick = () => {
        isLoading.value = true;
        formRef.value.validate(async (errors) => {
          if (!errors) {
            try {
              const formdata = new FormData();
              const keys = Object.keys(modelData.value);
              for (let i = 0; i < keys.length; i++) {
                const key = keys[i];
                formdata.append(key, modelData.value[key]);
              }
              await addEnterprise(formdata);
              message.success('添加成功');
              isLoading.value = false;
              emit('ModelClick', false);
            } catch (e) {
              message.error('添加失败');
              isLoading.value = false;
            }
          }
        });
      };
      const beforeLicenseUpload = ({ fileList }) => {
        const file = fileList[fileList.length - 1].file;
        modelData.value['licensePhoto'] = file;
      };
      const Close = () => {
        emit('close', false);
      };
      const onNegativeClick = () => {
        emit('close', false);
      };

      return {
        isLoading,
        modelData,
        beforeLicenseUpload,
        show,
        Obj,
        onPositiveClick,
        onNegativeClick,
        Close,
        formRef,
        size: ref('medium'),
      };
    },
  });
</script>

<style lang="less" scoped>
  .centers :deep .n-transfer {
    width: 100%;
  }
</style>
